import React, { useState, useEffect } from "react";
import { Form, Select, Input, TimePicker, Radio, Row, Col } from 'antd';
const { Option } = Select;

import UploadGroup from './upload/UploadGroup';

export default function Travel() {
    let data = {
        trip_time: '',
        trip_type: 1,
        hotel_in_city: '',
        hotel_name: '',
        hotel_level: '',
        scenic_name: '',
        scenic_active_time: '',
        dining_type: '',
        dining_is_contain: '',
        dining_special_instruction: '',
        shopping_title: '',
        shopping_active_time: '',
        free_active_title: '',
        free_active_time: '',
        own_title: '',
        own_active_time: '',
        other_title: '',
        other_active_time: '',
        today_profile: '',
        has_detail_description: 0,
        detail_description: '',
        description_image: {},
        sub_scenic:[],
        sub_shopping:[]
    };
    let [ trip, setTrip ] = useState(data);

    useEffect(() => {
        console.log('p>>render====')
    });

    const type = [{ label: '酒店住宿' }, { label: '景点' }, { label: '餐饮' }, { label: '购物' }, { label: '自由活动' }, { label: '自费项目' }, { label: '其他' }, { label: '今日亮点' } ];

    let onChange = (k, v) => {
        setTrip({ ...trip, [k]: v });
        console.log(trip)
    };
    return (
        <div>
            <Form.Item
                label="行程时间"
                labelCol={{ span: 4 }}
            >
                <TimePicker format={'HH:mm'} value={trip.trip_time} onChange={(v) => onChange('trip_time', v)} />
            </Form.Item>
            <Form.Item
                label="类型"
                labelCol={{ span: 4 }}
            >
                <Select
                    style={{ width: 200 }}
                    placeholder="请选择"
                    value={trip.trip_type}
                    onChange={(v) => onChange('trip_type', v)}
                >
                    {
                        type.map((item, i) => (<Option key={i} value={++i}>{item.label}</Option>))
                    }
                </Select>
            </Form.Item>
            <TravelCont prop={trip} onChange={onChange}/>
        </div>
    );
};

function TravelContView({ prop, onChange }) {
    console.log('c>>render====')
    const hotelLevel = [{ label: '客栈' }, { label: '经济连锁' }, { label: '二星及以下' }, { label: '三星舒适' }, { label: '四星高档' }, { label: '五星豪华' }];
    switch(prop.trip_type) {
        case 1:
            return (
                <div>
                    <Form.Item
                        label="入住城市"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.hotel_in_city} onChange={(v) => onChange('hotel_in_city', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                            label="酒店名称"
                            labelCol={{ span: 4 }}
                        >
                        <Input value={prop.hotel_name} onChange={(v) => onChange('hotel_name', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="酒店星级"
                        labelCol={{ span: 4 }}
                    >
                        <Select
                            allowClear={true}
                            style={{ width: 200 }}
                            placeholder="请选择"
                            value={prop.hotel_level}
                            onChange={(v) => onChange('hotel_level', v)}
                        >
                            {
                                hotelLevel.map((item, i) => (<Option key={i} value={++i}>{item.label}</Option>))
                            }
                        </Select>
                    </Form.Item>
                    <DetailDes prop={prop} onChange={onChange}/>
                </div>
            );
            break;
        case 2:
            return (
                <div>
                    <Form.Item
                        label="景点名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.scenic_name} onChange={(v) => onChange('scenic_name', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.scenic_active_time} onChange={(v) => onChange('scenic_active_time', v)} />
                    </Form.Item>
                    <DetailDes prop={prop} onChange={onChange}/>
                </div>
            );
            break;
        case 3:
            return (
                <div>
                    <Form.Item
                        label="餐饮类型"
                        labelCol={{ span: 4 }}
                    >
                        <Radio.Group onChange={(v) => {onChange('dining_type', v.target.value)}} value={prop.dining_type}>
                            <Radio value={0}>早餐</Radio>
                            <Radio value={1}>中餐</Radio>
                            <Radio value={2}>晚餐</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="是否包含"
                        labelCol={{ span: 4 }}
                    >
                        <Radio.Group onChange={(v) => {onChange('dining_is_contain', v.target.value)}} value={prop.dining_is_contain}>
                            <Radio value={0}>含</Radio>
                            <Radio value={1}>不含</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="特殊说明"
                        labelCol={{ span: 4 }}
                    >
                        <Input.TextArea rows={4} onChange={(v) => {onChange('dining_special_instruction', v.target.value)}} value={prop.dining_special_instruction}/>
                    </Form.Item>
                    <DetailDes prop={prop} onChange={onChange}/>
                </div>
            );
            break;
        case 4:
            return (
                <div>
                    <Form.Item
                        label="购物点名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.shopping_title} onChange={(v) => onChange('shopping_title', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.shopping_active_time} onChange={(v) => onChange('shopping_active_time', v)} />
                    </Form.Item>
                    <DetailDes prop={prop} onChange={onChange}/>
                </div>
            );
            break;
        case 5:
            return (
                <div>
                    <Form.Item
                        label="活动名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.free_active_title} onChange={(v) => onChange('free_active_title', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.free_active_time} onChange={(v) => onChange('free_active_time', v)} />
                    </Form.Item>
                    <DetailDes prop={prop} onChange={onChange}/>
                </div>
            );
            break;
        case 6:
            return (
                <div>
                    <Form.Item
                        label="名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.own_title} onChange={(v) => onChange('own_title', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.own_active_time} onChange={(v) => onChange('own_active_time', v)} />
                    </Form.Item>
                    <DetailDes prop={prop} onChange={onChange}/>
                </div>
            );
            break;
        case 7:
            return (
                <div>
                    <Form.Item
                        label="名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.other_title} onChange={(v) => onChange('other_title', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.other_active_time} onChange={(v) => onChange('other_active_time', v)} />
                    </Form.Item>
                    <DetailDes prop={prop} onChange={onChange}/>
                </div>
            );
            break;
        case 8:
            return (
                <div>
                    <Form.Item
                        label="简介"
                        labelCol={{ span: 4 }}
                    >
                        <Input.TextArea rows={4} onChange={(v) => {onChange('today_profile', v.target.value)}} value={prop.today_profile}/>
                    </Form.Item>
                </div>
            );
            break;
        default:
            return null;
            break;
    }
};
let TravelCont = React.memo(TravelContView, (prevProps, nextProps) => {
    /*console.log(prevProps, nextProps)
    return (prevProps.type === nextProps.type)*/
});

function DetailDesView({ prop, onChange }) {
    return (
        <div>
            <Form.Item
                label="是否添加详细描述"
                labelCol={{ span: 6 }}
            >
                <Radio.Group onChange={(v) => {onChange('has_detail_description', v.target.value)}} value={prop.has_detail_description}>
                    <Radio value={1}>是</Radio>
                    <Radio value={0}>否</Radio>
                </Radio.Group>
            </Form.Item>
            {
                !!prop.has_detail_description &&
                (
                    <div>
                        <Form.Item
                            label="详细说明"
                            labelCol={{ span: 4 }}
                        >
                            <Input.TextArea rows={4} onChange={(v) => {onChange('detail_description', v.target.value)}} value={prop.detail_description}/>
                        </Form.Item>
                        <div className="detail-img-box">
                            <UploadGroup
                                prop={prop}
                                span={5}
                                onChange={onChange}
                            >
                            </UploadGroup>
                            <p>每天行程配图最多4张，请务必保证上传的图片尺寸最佳为750px宽,图片大小不能超过500K,以此适配手机端、电脑端</p>
                        </div>
                    </div>
                )
            }
        </div>
    );
}

let DetailDes = React.memo(DetailDesView);